import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Page {
    width: 640
    height: 380

    header: Label {
        text: qsTr("Page 3")
        font.pixelSize: Qt.application.font.pixelSize * 2
        padding: 10
    }
    Column {
        spacing: 20
        anchors.centerIn: parent
        width: parent.width
        Slider {
            id: aSlider
            width: parent.width * 0.8
            from: 0
            to: 255
            stepSize: 1
            value: 10
            anchors.centerIn: parent
            background: Rectangle {
                implicitWidth: 200
                implicitHeight : 30
                color: "#ffffff"
                radius: 30
                Rectangle {
                    width: aSlider.visualPosition == 0 ? 0:aSlider.handle.x + aSlider.handle.width / 2
                    height: parent.height
                    color: "#0000ff"
                    radius: 30
                }
            }
            handle: Rectangle {
                x: aSlider.leftPadding + aSlider.visualPosition * (aSlider.availableWidth - width)
                y: aSlider.topPadding + aSlider.availableHeight / 2 - height / 2
                implicitHeight: 30
                implicitWidth: 30
                color: "#884ea0"
                radius: 30
                border.color: "#82e0aa"
                border.width: 2
            }

            onValueChanged: {
                SystemUtils.ledaControl(aSlider.value)
                console.log(value)
            }
        }
        Text {
            id: aSliderText
            text: "Alpha: " + aSlider.value / 255
            color: "#ffffff"
            font.pixelSize: Qt.application.font.pixelSize * 2
            anchors.top: aSlider.bottom
            anchors.horizontalCenter: aSlider.horizontalCenter
        }
    }
}
